<template>
  <div class="publicBox" id="bannerNewbuildCss">

<el-form ref="form" :model="ruleForm"  class="demo-form-inline publicEditFrom" :rules="rules" label-width="160px" label-position="left">

<el-row>
     <div class="pubPageTagP">
               <p>banner管理/新建</p>
     </div>
</el-row>

<el-row>
         <el-form-item label="轮播位位置" prop="position">
                   <el-select v-model="ruleForm.position" filterable placeholder="1" class="pubSlt200">
                       <el-option
                         v-for="item in RootOptions"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
                       </el-option>
                   </el-select>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="banner名称" prop="name">
                 <el-input v-if="!disabledFlag" class="pubSerIpt" v-model="ruleForm.name"  placeholder="请输入banner名称"></el-input>
                 <p v-else>{{ruleForm.name}}</p>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="跳转地址" prop="url">
                 <el-input class="pubSerIpt" v-model="ruleForm.url"  placeholder="请输入banner跳转URL"></el-input>
       </el-form-item>
</el-row>

<el-row>
<el-form-item label="开始时间" required prop="startTime">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.startTime"></el-date-picker>
        <el-time-picker placeholder="选择时间" v-model="ruleForm.startTime"></el-time-picker>
  </el-form-item>
</el-row>
<el-row>

<el-form-item label="结束时间" required prop="endTime">
        <el-date-picker 
        type="date"  placeholder="选择日期"  v-model="ruleForm.endTime"></el-date-picker>
        <el-time-picker placeholder="选择时间"  v-model="ruleForm.endTime"></el-time-picker>
  </el-form-item>
</el-row>
<el-row>
         <el-form-item label="banner图" prop="picRe">
                 <publicUpdate 
                 :paramsData="ruleForm" 
                 :disabledFlag='disabledFlag'
                 :hrefUpload="action"
                 @successFn="successFn"
                 :fileListPro="fileListPro"
                 ref="publicUpImg"></publicUpdate>
                  <!-- acceptUpload="application/vnd.android.package-archive"  指定apk文件 -->
       </el-form-item>
</el-row>
<el-row class="pubSubmitBtn-row">
           <el-form-item>
                         <el-button class="pubBtnGree" type="primary" @click="submitForm">提交</el-button>
                         <el-button class="pubBtnGray" @click="$canCleFn"  type="primary">取消</el-button>
          </el-form-item>
</el-row>


</el-form>
  </div>
</template>

<script>

import publicUpdate from "@/components/public/publicUpImg"
export default {
  components: {
      publicUpdate

  },
  data() {
    return {
    disabledFlag:false,
    fileListPro:"",
    RootOptions: [
      {name:"轮播图1号位",id:1},
      {name:"轮播图2号位",id:2},
      {name:"轮播图3号位",id:3},
      {name:"轮播图4号位",id:4},
      {name:"轮播图5号位",id:5},
      {name:"轮播图备用位",id:0},
      ],
    action:"/v1/flash/banners",
    ruleForm:{
        id:null,
        picRe:"123",
        position:1,
        name:"",
        url:"",
        endTime:"",
        startTime:"",
    },
    rules: {
          position: [
            {required: true, message: '请选择那个位置', trigger: 'blur' }
          ],
          name: [
            {required: true, message: '请输入banner名称', trigger: 'blur' }
          ],
          url: [
            {required: true, message: '请输入url地址', trigger: 'blur' }
          ],
          startTime: [
            {required: true, message: '请选择开始时间', trigger: 'blur'  }
          ],
          endTime: [
            {required: true, message: '请选择结束时间', trigger: 'blur'  }
          ],
          picRe: [
            {required: true, message: '请选择图片', trigger: 'blur'  }
          ],
        },
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    dataChange(data){
         let d = new Date(data);  
         let youWant=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();  
         return youWant
   },
    submitForm() {
           this.$refs["form"].validate((valid) => {
            if (valid) {
                this.ruleForm.endTime=this.dataChange(this.ruleForm.endTime)
                this.ruleForm.startTime=this.dataChange(this.ruleForm.startTime)
                this.$refs.publicUpImg.submitUpload(this.ruleForm)  //将上传参数带过去
            } else {
              return false;
            }
        });
       },
    successFn(res){
               if(res.IsPositive){
                  this.$message.success({message:"操作成功"})
                  this.$router.go(-1)
                }else{
                  this.$message.error({message:res.ErrorCode})
                }
    }
  },
 created() {
 if(this.$route.query.data!=undefined){              //ES6写法, Object.keys(targetObject)  将对象的key作为一个数组返回
            this.disabledFlag=true    
            this.ruleForm.startTime=this.ChangeDateFormat(this.$route.query.data.starttime,true)
            this.ruleForm.endTime=this.ChangeDateFormat(this.$route.query.data.endtime,true)
             this.ruleForm.id=this.$route.query.data.id
             this.ruleForm.url=this.$route.query.data.url
             this.ruleForm.position=this.$route.query.data.position
             this.ruleForm.name=this.$route.query.data.name
             this.fileListPro=this.$route.query.data.pic
   }
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>
#bannerNewbuildCss{
.add_box{
    width:380px;
    height:149px;
    border:1px solid #BBBBBB;
    position: relative;
}
// .upload{
//     width: 100px;
//     height: 101px;
//     position: absolute;
//     left: 0;
//     right: 0;
//     top: 0;
//     bottom: 0;
//     cursor: pointer;
//     margin: auto;


// }


}


</style>